import React from 'react';
import Chart from 'echarts-for-react';
import surface from 'echarts-gl';

class MySurface extends React.Component {

    setOption = {
        visualMap: {
            show: false,
            dimension: 2,
            min: -1,
            max: 1,
            inRange: {
                color: ['#a683e4','#7190cc','#447682','#6aacc9', '#589f9a',  '#ccdaa6',  '#f1f0ab',]
            }
        },
        xAxis3D: {
            type: 'value',
            axisLine:{lineStyle:{color:'#fff'}},
            axisLabel:{textStyle:{color:'#fff'}}
        },
        yAxis3D: {
            type: 'value',
            axisLine:{lineStyle:{color:'#fff'}},
            axisLabel:{textStyle:{color:'#fff'}}
        },
        zAxis3D: {
            type: 'value',
            axisLine:{lineStyle:{color:'#fff'}},
            axisLabel:{textStyle:{color:'#fff'}}
        },
        grid3D: {
            viewControl: {
                // projection: 'orthographic'
            }
        },
        series: [{
            type: 'surface',
            wireframe: {
                // show: false
            },
            equation: {
                x: {
                    step: 0.05
                },
                y: {
                    step: 0.05
                },
                z: function (x, y) {
                    if (Math.abs(x) < 0.1 && Math.abs(y) < 0.1) {
                        return '-';
                    }
                    return Math.sin(x * Math.PI) * Math.sin(y * Math.PI);
                }
            }
        }]
    };
    render() {
        return (
            <div>
                <Chart
                    option={this.setOption}
                    notMerge
                    lazyUpdate
                    style={{ height: 300,width: 300}}
                />
            </div>
        )
    }
}
export default MySurface;
